<template>
  <div class="comp-page-search-all">

    <!-- 高级搜索表单
    -------------------------- -->
    <el-form ref="form" 
      class="comp-page-search-all__form"
      :model="formModel" 
      label-width="95px"
      label-position="left"
      size="mini"
      layout layout-align="start center" layout-wrap>

      <!-- 表单具体项
      -------------------------- -->
      <template v-for="item in list">

        <!-- 普通输入框 -->
        <el-form-item :label="item.name"
          v-if="item.type === 'input'"
          :key="item.name">
          <el-input v-model="item.value"
            @focus="$emit('focusNameChange', item.name)"
            @blur="$emit('focusNameChange', '')"></el-input>
        </el-form-item>

        <!-- 下拉选择框 -->
        <el-form-item :label="item.name"
          v-if="item.type === 'select'"
          :key="item.name">
          <!-- 下拉选择框组件 -->
          <select-form-item
            @focusNameChange="v => $emit('focusNameChange', v)"
            @selectChange="selectChange"
            from="all"
            :metaData="item"></select-form-item>
        </el-form-item>

        <!-- switch选择框 -->
        <el-form-item :label="item.name"
          v-if="item.type === 'switch'"
          :key="item.name">
          <el-switch v-model="item.value"
            @change="switchChange(item)"
            @focus="$emit('focusNameChange', item.name)"
            @blur="$emit('focusNameChange', '')"></el-switch>
        </el-form-item>

        <!-- 地区选择框 -->
        <el-form-item :label="item.name"
          v-if="item.type === 'area'"
          :key="item.name">
          <area-cascader 
            :model="item"
            :reset="resetByToogle"
            @change="areaChange"
            @focus="$emit('focusNameChange', item.name)"
            @blur="$emit('focusNameChange', '')"></area-cascader>
        </el-form-item>

        <!-- 具体时间段选择框 -->
        <el-form-item :label="item.name"
          class="double-width"
          v-if="item.type === 'datetimerange'"
          :key="item.name">
          <el-date-picker 
            v-model="item.value"
            type="datetimerange"
            @change="datePickerChange(item)"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"></el-date-picker>
        </el-form-item>
      </template>
    </el-form>

    <!-- 功能按钮区 -->
    <div class="comp-page-search__search-all-btn">
        <el-button @click.native="searchChange"
          type="primary" size="small">查询</el-button>
        <el-button @click.native="searchReset"
          type="info" size="small">重置</el-button>
      </div>
  </div>
</template>

<script>
import SelectFormItem from './select.vue'
import { DateFormat } from 'services/Util'
import AreaCascader from 'components/core/area-cascader'

export default {
  name: 'PgSearchAll',
  components: { SelectFormItem, AreaCascader },
  data () {
    return {
      list: [],
      resetByToogle: false
    }
  },
  props: {
    searchAllList: Array
  },
  watch: {
    searchAllList: {
      immediate: true,
      handler (v) {
        this.list = v
      }
    }
  },

  computed: {
    // el-form - model
    formModel () {
      const target = {}
      this.list.forEach(i => {
        target[i.key] = i.value
      })
      return target
    }
  },
  methods: {
    // 下拉选择框改变
    selectChange (data) {
      this.list = this.list.map(i => {
        return i.name === data.name ? data : i
      })
    },
    // 开关选择框改变
    switchChange (data) {
      this.list = this.list.map(i => {
        if (i.name === data.name) {
          i.label = i.value ? '是' : '否'
        }
        return i
      })
    },
    // 时间选择框改变
    datePickerChange (data) {
      this.list = this.list.map(i => {
        if (i.name === data.name) {
          i.label = `${DateFormat(i.value[0], 'yyyy-MM-dd hh:mm:ss')} - ${DateFormat(i.value[1], 'yyyy-MM-dd hh:mm:ss')}`
        }
        return i
      })
    },
    // 区域选择改变
    areaChange (data) {
      this.list = this.list.map(i => {
        if (i.name === data.data.name) {
          i.value = data.value[2].region_id
          i.label = data.value[2].name
        }
        return i
      })
    },
    // 搜索改变
    searchChange () {
      this.$emit('searchAll', this.list)
    },
    // 重置
    searchReset () {
      this.list = this.list.map(item => {
        item.value = ''
        item.label = ''
        return item
      })
      this.resetByToogle = !this.resetByToogle
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(page-search-all) {

  @include e(form) {
    $--base-width: 237px;
    .el-form-item {
      height: $--page-search-all-item-height;
      width: $--base-width;
      margin-right: 20px;
      margin-bottom: $--margin-base * 1.5;
      @include layout(('md', 'sm', 'xs')) { margin-bottom: $--margin-base; }

      label {
        font-size: 13px;
        padding-right: 0;
      }
    }
    .double-width {
      width: $--base-width * 2 + 20px;
    }
    .three-width {
      width: $--base-width * 3 + 40px;
    }
    .line {
      text-align: center;
    }
    .el-textarea__inner {
      min-height: unset!important;
      height: $--page-search-all-item-height;
      &:focus {
        height: unset;
      }
    }
  }
}
</style>

